<template>
  <div class="amount-button">
    <div
      :style="ButtonStyle"
      class="flex-center"
    >
      <SvgIcon
        :name="props.icon"
        :color="props.color"
      />
    </div>
    <span class="amount-button__text">{{ props.title }}</span>
  </div>
</template>

<script lang="ts" setup>
  import { AmountMenu } from '@/types/bill'
  import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
  const props = defineProps<AmountMenu>()

  const ButtonStyle = computed(() => {
    return {
      background: props.background,
      color: props.color,
      borderRadius: '8px',
      height: '40px',
      marginBottom: '4px'
    }
  })
</script>

<style scoped lang="scss">
  .amount-button {
    width: 75px;
    text-align: center;
    cursor: pointer;
    &:hover {
      .amount-button__text {
        color: #000;
      }
    }
    &__text {
      font-size: 12px;
      color: #666;
    }
  }
</style>
